<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>联币ICO</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css">
    <style type="text/css">
        input[type='number'] {
            -moz-appearance:textfield;
        }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }
    </style>
</head>
<body>
<div class="wrap wrap-reg container-fluid">
    <form action="/index/index/upRegister" class="reg-form" method="post" accept-charset="utf-8">
        <div class="form-group">
            <h1>欢迎注册联币网</h1>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="mobile" id="mobile" maxlength="11" oninput="check_phone();" placeholder="请输入手机号码">
        </div>
        <div class="form-group valume row" style="padding: 0;margin: 0;">
            <input type="text" name="captcha" id="img_code"  class="form-control col-xs-5" placeholder="请输入图形验证码">
            <img src="{:captcha_src()}" class="col-xs-6" id="img_code" onclick="this.src='/captcha.html?d='+Math.random();">
        </div>
        <div class="form-group valume">
            <input type="text" name="code" id="code" oninput="check_code(this);"  class="form-control" placeholder="请输入验证码">
            <button type="button" class="btn btn-success"  id="getcode" value="0" disabled>获取验证码</button>
        </div>
        <div class="form-group">
            <input type="text" name="name"  class="form-control" id="name" placeholder="请输入你的真实姓名">
        </div>
        <div class="form-group">
            <input type="text" name="id_card"  id="id_card" class="form-control" oninput="check_IDcard();" placeholder="请输入你的身份证号">
        </div>
        <div class="form-group">
            <input type="password" name="password"  id="password" class="form-control" oninput="if(value.length>16){value=value.slice(0,16);layer.msg('密码最长为16')};" placeholder="请设置登录密码">
        </div>
        <div class="form-group">
            <input type="password" name="rePassword" id="rePassword"  class="form-control" oninput="if(value.length>16){value=value.slice(0,16);layer.msg('密码最长为16')};" placeholder="请确认登录密码">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success">注册</button>
        </div>
        <div class="form-group alink">
            <a href="/index/index/index" title="" class="pull-right">已有账号,立即登录!</a>
        </div>
        <input type="hidden" name="msg_id" value="">
    </form>
    <input type="hidden" class="error" name="" value="{$error ?: ''}">
</div>
<script type="text/javascript" src='/js/jquery.js'></script>
<script type="text/javascript" src='/layer/layer.js'></script>
<script type="text/javascript" src='/js/getCode.js'></script>
<script type="text/javascript">
 //限制手机输入框格式及检查是否被注册
    function check_phone(){
        var mobile = $('#mobile').val();
        var reg = /\d+/;
        //禁止符号（. +）;
        if(!reg.test(mobile)){
            $('#mobile').val('');
            layer.msg('请输入正确的手机格式！',{icon:2,time:1000});
        }
        if(mobile.length>=12){
            $('#mobile').val(mobile.slice(0,11));
            var mobile_last = $('#mobile').val();
        }
        if(mobile.length==11){
            //匹配手机号格式
            var phone_reg = /^1[3578]\d{9}$/;
            if(!phone_reg.test(mobile)){
                layer.msg('请输入正确的手机格式！',{icon:2,time:1000});
                return false;
            }
            $.post("{:url('index/index/check_is_register')}",{username:$('#mobile').val()},function(e){
                if(e.code==1){
                    layer.msg('该账号已存在！',{icon:2,time:2000});
                    $('#getcode').attr('disabled','disabled');
                }else{
                    $('#getcode').removeAttr('disabled');
                }
            })
        }
    }
    //图形验证码
    // function check_img_code(){
    //     var img_code = $('#img_code').val();
    //     if(img_code ==''){
    //         layer.msg('请输入正确的图形验证码！',{icon:2,time:1000});
    //         return false;
    //     }
    //     $.post("{:url('index/index/check_img_code')}",{img_code:img_code},function(e){
    //             if(e.code!=1){
    //                 layer.msg('请输入正确的图形验证码！',{icon:2,time:1000});
    //                 return false;
    //             }
    //             Code.getcode($, '#getcode', '/index.php?s=index/index/sendPhoneCode', function (msg) {
    //                 $('input[name="msg_id"]').val(msg.msg_id)
    //                 Code.timeStart($, 60, '#getcode', Code.isClicked)
    //             });
    //         })
    // }

    //验证码验证
    function check_code(index){
        var code = $(index).val();
        var reg = /\d+/;
        if(!reg.test(code)){
            layer.msg('请输入正确格式的验证码!');
            $(index).val('');
        }else if(code.length>6){
            $(index).val(code.slice(0,6));
        }
    }
    //验证身份证格式
    function check_IDcard(){
        var idcard = $('#id_card').val();
        var befor_reg = /\d+/;
        if(idcard.length<=17){
            if(!befor_reg.test(idcard)){
                // layer.msg('请输入正确的身份证格式！',{icon:2,time:1000});
                $('#id_card').val('');
            }
        }else if(idcard.length==18){
            var last_reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            if(!last_reg.test(idcard)){
                layer.msg('请输入正确的身份证格式！',{icon:2,time:1000});
            }
        }else{
            layer.msg('身份证最长为18位！',{icon:2,time:1000});
            $('#id_card').val(idcard.slice(0,18));
        }
    }


    $(function () {
        Code.getcode($, '#getcode', '/index.php?s=index/index/sendPhoneCode',"{:url('index/index/check_img_code')}", function (msg) {
            $('input[name="msg_id"]').val(msg.msg_id)
            Code.timeStart($, 60, '#getcode', Code.isClicked)
        });

        $('form').submit(function () {
            // if (!$('input[type="text"]').val()) {
            //     layer.msg('请填写每项信息！')
            //     return false;
            // }
            if($('#mobile').val()==''){
                layer.msg($('#mobile').attr('placeholder'));
                return false;
            }
            if($('#code').val()==''){
                layer.msg($('#code').attr('placeholder'));
                return false;
            }
            if($('#name').val()==''){
                layer.msg($('#name').attr('placeholder'));
                return false;
            }
            if($('#id_card').val()==''){
                layer.msg($('#id_card').attr('placeholder'));
                return false;
            }
            if($('#password').val()==''){
                layer.msg($('#password').attr('placeholder'));
                return false;
            }
            if($('#rePassword').val()==''){
                layer.msg($('#rePassword').attr('placeholder'));
                return false;
            }
            var password = $('input[name="password"]');
            var re_password = $('input[name="rePassword"]');
            if (password.length != 0 && password.val() != re_password.val()) {
                layer.msg('两次密码不一致！')
                return false
            }
            if(password.val().length<6||re_password.val().length<6){
                layer.msg('密码最短需要6位！');
                return false
            }
            if(password.val().length>16||re_password.val().length>16){
                layer.msg('密码最长不超过16位！');
                return false;
            }
            $.post("{:url('upRegister')}",$('form').serialize(),function(e){
                if(e.code==1){
                    layer.msg(e.msg,{icon:1,time:2000});
                    setTimeout("window.location.href='"+e.url+"'",2000);
                }else{
                    layer.msg(e.msg,{icon:2,time:2000});
                }
            })
            return  false;
        })
        if($('.error').val()) {
            layer.alert($('.error').val(), {icon: 5})
        }
    })
</script>
</body>
</html>